import React, { Component } from 'react'
import { Radio, Space } from 'antd';
import { formatTime, openNotification } from '../../../util/util'
import './index.css'
import { reqMonitor, reqPatientInfo } from '../../../api'

export default class index extends Component {
  state = {
    user: {},
    date: formatTime(new Date()),
    "body_temperature": 1,
    "location": 0, // 0-中国 1-港澳台或国外
    "get_out": false, // 近 14 日是否出省
    "discomfort": false, // 是否出现乏力、干咳等不适症状
    "touch": false, // 是否接触其他具有不适症状的人群
    risk: '',
  }
  componentDidMount = async () => {
    const user = (await reqPatientInfo()).data
    this.setState({user})
  }
  onChange = (mytype, e) => {
    const state = {...this.state}
    state[mytype] = e.target.value
    this.setState(state)
  }
  submit = async (e) => {
    e.preventDefault()
    const submitted = this.state.user.submitted
    if (submitted) {
      openNotification({ description: '今日已经提交，不可再提交' })
      return
    }
    try {
      const res = await reqMonitor(this.state)
      console.log('res', res)
      if (res.code === 1) {
        const user = (await reqPatientInfo()).data
        this.setState({user})
        openNotification({ description: '填报成功', type: 'success' })
        // setTimeout(() => {
        //   this.props.history.goBack()
        // }, 2000)
      } else if (res.code === 0) {
        openNotification({ description: '网络开小差了，请稍后再试', type: 'error' })
      }
    } catch {
      openNotification({ description: '网络开小差了，请稍后再试', type: 'error' })
      console.log('try catch')
    }
    return false
  }
  render() {
    const { user, date, body_temperature, location, get_out, discomfort, touch } = this.state
    const submitted = user.submitted
    return (
      <div className="monitoring">
        <form action="" className="form-signin" onSubmit={this.submit}>
          <div className="m_item">
            <div className="title">填报日期</div>
            <div className="input form-control">{date}</div>
          </div>
          <div className="m_item">
            <div className="title">姓名</div>
            <div className="input form-control">{user && user.name}</div>
          </div>
          <div className="m_item">
            <div className="title">今日体温范围</div>
            <Radio.Group onChange={(e) => {this.onChange('body_temperature', e)}} value={body_temperature}>
              <Space direction="vertical">
                <Radio value={0}>36.0°C以下</Radio>
                <Radio value={1}>36.0°C~36.9°C</Radio>
                <Radio value={2}>36.9°C~37.3°C</Radio>
                <Radio value={3}>37.3°C~38.0°C</Radio>
                <Radio value={4}>38.0°C~39.0°C</Radio>
                <Radio value={5}>39.0°C~40.0°C</Radio>
                <Radio value={6}>40.0°C以上</Radio>
              </Space>
            </Radio.Group>
          </div>
          <div className="m_item">
            <div className="title">所在地点</div>
            <Radio.Group onChange={(e) => {this.onChange('location', e)}} value={location}>
              <Space direction="vertical">
                <Radio value={0}>中国大陆</Radio>
                <Radio value={1}>港澳台或国外</Radio>
              </Space>
            </Radio.Group>
          </div>
          <div className="m_item">
            <div className="title">近 14 日是否出省</div>
            <Radio.Group onChange={(e) => {this.onChange('get_out', e)}} value={get_out}>
              <Space direction="vertical">
                <Radio value={true}>是</Radio>
                <Radio value={false}>否</Radio>
              </Space>
            </Radio.Group>
          </div>
          <div className="m_item">
            <div className="title">今日是否出现乏力、干咳等不适症状</div>
            <Radio.Group onChange={(e) => {this.onChange('discomfort', e)}} value={discomfort}>
              <Space direction="vertical">
                <Radio value={true}>是</Radio>
                <Radio value={false}>否</Radio>
              </Space>
            </Radio.Group>
          </div>
          <div className="m_item">
            <div className="title">今日是否接触其他具有不适症状的人群</div>
            <Radio.Group onChange={(e) => {this.onChange('touch', e)}} value={touch}>
              <Space direction="vertical">
                <Radio value={true}>是</Radio>
                <Radio value={false}>否</Radio>
              </Space>
            </Radio.Group>
          </div>
          <div className="m_item">
            <div className="title">其他信息</div>
            <textarea className="input form-control text" placeholder="无" onChange={(e) => {this.onChange('risk', e)}}></textarea>
          </div>
          <div className="m_item">
            <button className={`btn btn-lg btn-primary btn-block ${submitted?'submitted':''}`} type="submit">{submitted?'今日已经提交':'提交'}</button>
          </div>
        </form>
      </div>
    )
  }
}

